<template>
<div>
  <el-select v-model.trim="itemId"
             filterable
             allow-create
             placeholder="请选择">
    <el-option
      v-if="availableItemList.length>0"
      v-for="item in availableItemList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</div>
</template>

<script>
export default {
  /**
   * 主要用于下拉框的选择，如果下拉框中能选择的数据不符合条件，就用户输入，并并将用户输入的数据创建到数据库
   * 要求：要绑定的key必须是int
   * */
  name: 'selectAndInputToSelect',
  data(){
    return{
      itemId:null,
      availableItemList:[]
    }
  },
  watch:{
    itemId(val){
      if(/^[0-9]+$/.test(val)){
        this.$emit('update-item-id',val);
        console.log("用户在已有的下拉框中选择，无需添加其他参数")
        return ;
      }
      /**
       * 需要新增item，此时的val不再是int类型的id，而是用户输入的name
       * */
      this.$emit('insert-item',val);
    }
  }
}
</script>

<style scoped>

</style>
